import axios from "axios";
import React, { useEffect, useState } from "react";
import style from "./style.module.css";
import { InfiniteScroll } from "antd-mobile";
import { useNavigate } from "react-router-dom";
const Home = () => {
  const navigate = useNavigate()
  // 定义一个状态变量data，用于存储获取到的数据
  const [data, setData] = useState([]);
  // 定义一个状态变量pageCode，用于存储当前页码
  const [pageCode, setPageCode] = useState(1);
  // 定义一个异步函数getData，用于获取数据
  const getData = async () => {
    // 使用axios发送get请求，获取数据
    const resp = await axios.get("/api/room/list", { params: { pageCode } });
    // 从返回的数据中获取list
    const { list } = resp.data.data;
    // 将获取到的数据添加到data中
    setData(data.concat(list));
    // 打印获取到的数据
    console.log(list);
    // 将pageCode加1
    setPageCode(pageCode + 1);
  };

  const toDetail = (v) => {
    const url = `/detail/${v.id}`
    navigate(url, {
      state: v
    })
  };

  return (
    <div>
      {
        // 遍历data，将数据渲染到页面上
        data.map((v) => {
          return (
            <dl key={v.id} className={style["dl"]} onClick={() => toDetail(v)}>
              <dt className={style["dt"]}>
                <img src={v.url} alt="" className={style["img"]} />
              </dt>
              <dd>
                <h3>{v.name}</h3>
                <p>{v.title}</p>
              </dd>
            </dl>
          );
        })
      }

      {/* 使用InfiniteScroll组件，当滚动到底部时，调用getData函数 */}
      <InfiniteScroll loadMore={getData} hasMore={true}></InfiniteScroll>
    </div>
  );
};

export default Home;
